<!-- 动态 -->
<template>
  <div class="dynamic-container">
    <BackgroundBox v-loadings="isLoadingRef">
      <div class="head">
        <div class="title">
          <Icon type="getUpRecord"></Icon>
          <p>早起动态</p>
        </div>
        <div class="describe">
          <State></State>
          <Icon type="refresh" class="refresh" @click="headleRefresh"></Icon>
        </div>
      </div>
      <div class="main">
        <el-table
          :data="studentInfoRef"
          style="width: 100%; height: 100%"
          size="large"
        >
          <el-table-column
            label="姓名"
            prop="studentName"
            :width="columnSizeRef"
            align="center"
          />
          <el-table-column
            label="学号"
            prop="studentID"
            :width="columnSizeRef"
            align="center"
          />
          <el-table-column
            label="宿舍楼"
            prop="dormitoryName"
            :width="columnSizeRef"
            align="center"
          />
          <el-table-column
            label="楼层"
            prop="floorNumber"
            :width="columnSizeRef"
            align="center"
          />
          <el-table-column
            label="宿舍号"
            prop="roomNo"
            :width="columnSizeRef"
            align="center"
          />
          <el-table-column
            label="日期"
            prop="latestGetup.time"
            :width="columnSizeRef"
            align="center"
          />
          <el-table-column
            label="是否早起"
            prop="latestGetup.isGetup"
            align="center"
          >
            <template #default="scope">
              <div :class="scope.row.className"></div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </BackgroundBox>
  </div>
</template>

<script setup>
import BackgroundBox from "@/components/BackgroundBox/index.vue";
import Icon from "@/components/Icon/index.vue";
import State from "@/components/State/index.vue";
import { computed, ref, watch, watchEffect } from "vue";
import { getStudentInfo } from "@/api/student.js";
import moment from "moment";
const props = defineProps({
  dormitoryId: {
    type: Number,
    required: true,
  },
});
const isLoadingRef = ref(false);
const columnSizeRef = ref(170); // 列的宽度
const studentInfoRef = ref(null); // 远程数据
const totalRef = ref(0); // 总数据条数
const limit = 5; // 每页多少条
const pageRef = ref(1); // 页码
/**
 * 获取最新动态数据
 */
const getDynamicData = async () => {
  isLoadingRef.value = true;
  const { data } = await getStudentInfo({
    page: pageRef.value,
    limit,
    keyword: {
      dormitoryId: props.dormitoryId,
    },
  });
  studentInfoRef.value = data.rows.map((item) => {
    item.latestGetup.time = moment(item.latestGetup.time).format("YYYY-MM-DD");
    let className = "";
    if (item.latestGetup.isGetup === 0) {
      className = "NotTime";
    } else if (item.latestGetup.isGetup === 1) {
      className = "OnTime";
    } else if (item.latestGetup.isGetup === -1) {
      className = "NotClocked";
    }
    return {
      ...item,
      className,
    };
  });
  totalRef.value = data.total;
  isLoadingRef.value = false;
};
// 监听宿舍楼id获取最新动态数据
watch(
  props,
  async () => {
    pageRef.value = 1;
    await getDynamicData();
  },
  {
    immediate: true,
  }
);
// 点击刷新按钮
const headleRefresh = async () => {
  pageRef.value = Math.floor((Math.random() * totalRef.value) / limit) + 1;
  await getDynamicData();
};
</script>

<style lang="less" scoped>
@import "@/styles/var.less";
@import "@/styles/mixin.less";
.dynamic-container {
  width: 100%;
  height: 100%;
  position: relative;

  .main,
  .head {
    padding-left: 20px;
    padding-right: 20px;
  }
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 1.2em;
    color: @gray;
    .title {
      display: flex;
      align-items: center;
    }
    p {
      margin-left: 10px;
    }
    .describe {
      display: flex;
      align-items: center;
    }
    .refresh {
      cursor: pointer;
    }
  }
  .main {
    min-height: 200px;

    ::v-deep .el-table__body-wrapper {
      height: 100%;
    }
  }
}
.NotTime {
  .self-state(@danger);
}
.OnTime {
  display: block;
  .self-state(@success);
}
.NotClocked {
  .self-state(@Info);
}
</style>